import React,{Component} from 'react';
import {Row,Col,Table,Form,Input,Select, Button} from 'antd';
import './style.scss';

class ApiApplication extends Component{
    
    formRef=React.createRef();
    componentDidMount(){
        this.props.onRef(this)
    }

    render(){
        const rules={required:true};
        const style={color:'rgb(0,126,220)'};
        return(
            <div className='dbApplication'>
                <Form labelCol={{span:7}} wrapperCol={{span:15}} colon={false} ref={this.formRef}>
                    <Row>
                        <Col span={12}>
                            <Form.Item label={<span style={style}>任务名称</span>} rules={[rules]} name='taskName'>
                                <Input placeholder='请输入任务名称'/>
                            </Form.Item>
                            <Form.Item label={<span style={style}>资源名称</span>} >
                                社区网络基础
                            </Form.Item>
                            <Form.Item label={<span style={style}>提供方</span>}>
                                公安局
                            </Form.Item>
                            <Form.Item label={<span style={style}>发布接口名称</span>}>
                                社区网络基础
                            </Form.Item>
                            <Form.Item label={<span style={style}>需求方</span>}>
                                交通局
                            </Form.Item>
                            <Form.Item label={<span style={style}>统一代理地址</span>}>
                                <span className='dataSpan'>http://11.12.234.12:8080/adas/api</span>
                            </Form.Item>
                            <Form.Item label={<span style={style}>访问地址</span>} initialValue='http://11.12.234.12:8080/adas/api/gonganju/21' name='address'>
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={12}>
                            <Form.Item label={<span style={style}>调用次数限制（每天）</span>}  name='calls'>
                                <Select defaultValue='10'>
                                    <Select.Option value='10'>10</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label={<span style={style}>调用时间间隔</span>}  name='callInterval'>
                                <Select defaultValue='5'>
                                    <Select.Option value='5'>5s</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label={<span style={style}>开始时间</span>}  name='startTime'>
                                <Input placeholder='年/月/日'/>
                            </Form.Item>
                            <Form.Item label={<span style={style}>结束时间</span>}  name='endTime'>
                                <Input placeholder='年/月/日'/>
                            </Form.Item>
                            <Form.Item label={<span style={style}>接口协议</span>}  name='interfaceProtocol'>
                                <Select defaultValue='http'>
                                    <Select.Option value='http'>HTTP</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item label={<span style={style}>接口类型</span>}  name='interfaceType'>
                                <Select defaultValue='get'>
                                    <Select.Option value='get'>Get</Select.Option>
                                    <Select.Option value='post'>Post</Select.Option>
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <Form.Item label={<span style={style}>描述</span>}  name='desc' wrapperCol={{span:18}} labelCol={{span:6}}>
                                <Input.TextArea />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
        )
    }
}
export default ApiApplication;